<!--
- File:    个人中心页.
-->
<template>
  <div class="Web_Box">
    <!--<div class="my_tis">-->
    <!--<a href=""><i class="iconfont icon-tishi"></i><span>您的个人资料还未完善，请完善个人资料</span><i class="iconfont icon-more2"></i></a>-->
    <!--</div>-->
    <div class="MyHead xd">
      <div class="con pt50 pl25">
        <!--<span><i class="iconfont icon-message-copy" @click="gotoNoticeList"></i></span>-->
        <div class="Photo fl"><img :src="memberInfo.member_avatar" alt=""/></div>
        <div class="fl pl25">
          <h1 class="slh">{{memberInfo.member_name}}</h1>
        </div>
      </div>
    </div>
    <div class="balance">
      <ul class="f-cb">
        <!--<li><i class="iconfont icon-yue"></i><span>余额 <span class="cr_45a73a">{{memberInfo.balance}}</span></span>-->
        <!--</li>-->
        <li>
          <i class="iconfont icon-gold2"></i><span>积分 <span class="cr_45a73a">{{memberInfo.integral}}</span></span>
        </li>
      </ul>
    </div>
    <div class="OrderStatusEntry bor_b_dcdddd mt18 bg_fff">
      <ul>
        <li @click="gotoOrderListByType(1)"><i class="iconfont icon-paid"></i>
          <span class="num" v-show="countList.unpay_order != 0">{{countList.unpay_order | noticeMaxLimit}}</span>
          <p>待付款</p>
        </li>
        <li @click="gotoOrderListByType(2)"><i class="iconfont icon-shipped"></i>
          <span class="num" v-show="countList.payed_order != 0">{{countList.payed_order | noticeMaxLimit}}</span>
          <p>待发货</p>
        </li>
        <li @click="gotoOrderListByType(3)"><i class="iconfont icon-goodsreceived"></i>
          <span class="num" v-show="countList.ship_order != 0">{{countList.ship_order | noticeMaxLimit}}</span>
          <p>待收货</p>
        </li>
        <li @click="gotoOrderListByType(4)"><i class="iconfont icon-evaluated"></i>
          <span class="num" v-show="countList.eval_order != 0">{{countList.eval_order | noticeMaxLimit}}</span>
          <p>待评价</p>
        </li>
        <li @click="gotoRefundList"><i class="iconfont icon-refund"></i>
          <p>退款/退货</p>
        </li>
      </ul>
    </div>
    <div class="nav_list mb45">
      <ul>
        <router-link :to="{name: 'order-list'}">
          <li>
            <i class="lefticon iconfont icon-allorders bg_bcce1a"></i>
            <span class="f28">全部订单</span> <i class="iconfont icon-more"></i>
          </li>
        </router-link>
        <!--<router-link class="mt18" :to="{name: 'order-agent'}">-->
        <!--<li>-->
        <!--<i class="lefticon iconfont icon-identifyingcode bg_997849"></i>-->
        <!--<span class="f28">申请代下单</span> <i class="iconfont icon-more"></i>-->
        <!--</li>-->
        <!--</router-link>-->
        <!--<router-link :to="{name: 'invited-member'}">-->
        <!--<li>-->
        <!--<i class="lefticon iconfont icon-distributionmanagement bg_fbc835"></i>-->
        <!--<span class="f28">我的朋友</span><i class="iconfont icon-more"></i>-->
        <!--</li>-->
        <!--</router-link>-->
        <router-link class="disb hidden mt18" :to="{name: 'blog-index'}">
          <li>
            <i class="lefticon iconfont icon-fensi bg_3ebb6e"></i>
            <span class="f28">我的主页</span><i class="iconfont icon-more"></i>
          </li>
        </router-link>
        <router-link :to="{name: 'garden-list'}" class="disb hidden">
          <li>
            <i class="lefticon iconfont icon-TJ-Detail-huayuan bg_3ebb6e"></i>
            <span class="f28">我的花园</span><i class="iconfont icon-more"></i>
          </li>
        </router-link>
        <router-link :to="{name: 'member-balance'}">
          <!--<li>-->
          <!--<i class="lefticon iconfont icon-yue bg_9e85de"></i>-->
          <!--<span class="f28">余额明细</span><i class="iconfont icon-more"></i>-->
          <!--</li>-->
        </router-link>
        <router-link :to="{name: 'member-integral'}">
          <li>
            <i class="lefticon iconfont icon-gold2 bg_f0807e"></i>
            <span class="f28">积分明细</span><i class="iconfont icon-more"></i>
          </li>
        </router-link>
        <router-link class="disb hidden" :to="{name: 'collect-list'}">
        <li>
        <i class="lefticon iconfont icon-TJ-Detail-huayuan bg_51a5ba"></i>
        <span class="f28">我的收藏</span><i class="iconfont icon-more"></i>
        </li>
        </router-link>
        <router-link class="disb hidden" :to="{name: 'coupon-my'}">
          <li>
            <i class="lefticon iconfont icon-youhuiquan bg_e2b217"></i>
            <span class="f28">我的优惠券</span><i class="iconfont icon-more"></i>
          </li>
        </router-link>
        <router-link class="disb hidden" :to="{name: 'address-list'}">
          <li>
            <i class="lefticon iconfont icon-receivingaddress bg_96d696"></i>
            <span class="f28">我的收货地址</span><i class="iconfont icon-more"></i>
          </li>
        </router-link>

        <!--<router-link class="disb hidden" :to="{name: 'diary-add'}">-->
        <!--<li>-->
        <!--<i class="lefticon iconfont icon-bianji bg_bcce1a"></i>-->
        <!--<span class="f28">发布心情日记</span><i class="iconfont icon-more"></i>-->
        <!--</li>-->
        <!--</router-link>-->
        <!--<router-link class="disb hidden" :to="{name: 'fans-list'}">-->
        <!--<li>-->
        <!--<i class="lefticon iconfont icon-fensi1 bg_f0807e"></i>-->
        <!--<span class="f28">我的粉丝</span><i class="iconfont icon-more"></i>-->
        <!--</li>-->
        <!--</router-link>-->
        <!--<router-link class="disb hidden mt18" :to="{name: 'news-list'}">-->
        <!--<li class="">-->
        <!--<i class="lefticon iconfont icon-207 bg_fbc835"></i>-->
        <!--<span class="f28">微信文章推广</span><i class="iconfont icon-more"></i>-->
        <!--</li>-->
        <!--</router-link>-->
        <!--<router-link :to="{name: 'member-spread'}">-->
        <!--<li>-->
        <!--<i class="lefticon iconfont icon-invitepartners bg_997849"></i>-->
        <!--<span class="f28">推荐</span><i class="iconfont icon-more"></i>-->
        <!--</li>-->
        <!--</router-link>-->
        <router-link class="disb hidden" :to="{name: 'setting-feedback'}">
          <li>
            <i class="lefticon iconfont icon-postcode bg_fbc835"></i>
            <span class="f28">意见反馈</span><i class="iconfont icon-more"></i>
          </li>
        </router-link>
        <router-link class="disb hidden" :to="{name: 'store-contact'}">
          <li>
            <i class="lefticon iconfont icon-tel bg_f0807e"></i>
            <span class="f28">联系客服</span><i class="iconfont icon-more"></i>
          </li>
        </router-link>
        <router-link class="disb hidden" :to="{name: 'setting-index'}">
          <li>
            <i class="lefticon iconfont icon-setup bg_9e85de"></i>
            <span class="f28">设置</span><i class="iconfont icon-more"></i>
          </li>
        </router-link>
      </ul>
    </div>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  import {mapModules, mapRules} from 'vuet'

  export default{
    mixins: [
      mapModules({memberInfo: 'memberInfo'}),
      mapRules({need: 'memberInfo'})
    ],
    data() {
      return {
        countList: {payed_order: 0, ship_order: 0, unpay_order: 0, eval_order: 0}
      }
    },
    components: {},
    created() {
      this.$request.getAdvList()
      this.getCountList()
    },
    methods: {
      gotoNoticeList() {
        this.$router.push({name: 'notice-list'})
      },
      gotoOrderListByType(type) {
        this.$router.push({name: 'order-list', query: {type: type}})
      },
      gotoRefundList() {
        this.$router.push({name: 'refund-list', query: {type: this.$dictionary.refundType.money}})
      },
      getCountList() {
        this.$request.getCountList().then(data => {
          this.countList = data
        })
      }
    }
  }
</script>

<style>
  .OrderStatusEntry li {
    position: relative;
  }
  .OrderStatusEntry li .num {
    position: absolute;
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 16px;
    background: #fff;
    border: 1px #f00 solid;
    color: #f00;
    top: -5px;
    right:.8rem;
    font-size: 10px;
    border-radius: 50%;
  }

</style>
